<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/8/29
  Time: 14:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="script/layui/css/layui.css">
    <script type="text/javascript" src="script/layui/layui.js"></script>
    <style type="text/css">
        form{
            margin: 200px auto;
            width: 600px;
        }
        body{
            background-image: url("/image/timg.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
<ul class="layui-nav " style="text-align:center;"> &lt;-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 --&gt;
    <li class="layui-nav-item">
        <h2>注册中心</h2>
    </li>
</ul>

<form class="layui-form" action="emp_register" method="post" lay-filter="example">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input name="admin.username" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input" type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-block">
            <input name="admin.password" placeholder="请输入密码" autocomplete="off" class="layui-input" type="password">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input name="emp.empname" lay-verify="title" autocomplete="off" placeholder="请输入你的姓名" class="layui-input" type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">请选择职务</label>
        <div class="layui-input-block">
            <select name="emp.job" lay-filter="aihao">
                <option value=""></option>
                <option value="总经理">总经理</option>
                <option value="部门经理">部门经理</option>
                <option value="技术员">技术员</option>
                <option value="研发员">研发员</option>
                <option value="业务员">业务员</option>
                <option value="会计">会计</option>
                <option value="生产主管">生产主管</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">请选择部门</label>
        <div class="layui-input-block">
            <select name="dept.deptname" lay-filter="aihao">
                <option value=""></option>
                <option value="技术部">技术部</option>
                <option value="生产部">生产部</option>
                <option value="财务部">财务部</option>
                <option value="市场部">市场部</option>
                <option value="研发部">研发部</option>
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">请选择性别</label>
        <div class="layui-input-block">
            <input name="admin.role" value="0" title="男" checked="" type="radio">
            <input name="admin.role" value="1" title="女" type="radio">
        </div>
    </div>
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="emp.hiredate" id="test1" placeholder="请输入出生日期" type="text">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit=""  lay-filter="demo1">注册</button>
                <a href="/login.jsp">登录</a>
        </div><span>${requestScope.result}</span>
    </div>

</form>
</body>


<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });

        //日期
        laydate.render({
            elem: '#test1'
            ,trigger:'click'
            ,done: function(value){
                layer.alert('你选择的日期是：' + value );
            }
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '用户名至少得5个字符';
                }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //表单初始赋值
        form.val('example', {
            "username": "贤心" // "name": "value"
            ,"password": "123456"
            ,"interest": 1
            ,"like[write]": true //复选框选中状态
            ,"close": true //开关状态
            ,"sex": "女"
            ,"desc": "我爱 layui"
        })

    });
</script>
</html>
